<template>
  <div>
    <h1>Son1子组件</h1>
    <span>从vuex中获取的值：{{count}}</span>
    <br>
    <button @click="addCount(+1)">值+1</button>
    <button @click="addCount(+5)">值+5</button>
    <button @click="setAsyncCount">5秒后改为666</button>
    <hr>
    <div>{{ $store.getters.filterList }}</div>
    <!-- 访问模块中的state -->
    <div>{{ $store.state.user.userInfo.name }}</div>
    <!-- 访问模块中的getters -->
    <div>{{ $store.getters['user/UpperCaseName'] }}</div>
    <!-- 访问模块中的mutations -->
    <button @click="$store.commit('user/changeUserName','Hamabe')">修改名字</button>
    <!-- 访问模块中的actions -->
    <button @click="$store.dispatch('setting/changeAsyncTheme','Blue')">1秒后修改主题色</button>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'SonComp1',
  methods: {
    // handleClick (value) {
    //   this.$store.commit('addCount', value)
    // }
    ...mapMutations(['addCount']),
    // 该表达式展开等价于：
    // addCount(n){
    //   this.$store.commit('addCount',n)
    // }
    setAsyncCount (e) {
      let a = 5
      this.$store.dispatch('setAsyncCount', 666)
      const timer = setInterval(() => {
        e.target.innerHTML = `${a}s`
        if (!(--a)) {
          clearInterval(timer)
          e.target.innerHTML = '5秒后改为666'
        }
      }, 1000)
    }
  },
  computed: {
    ...mapState(['count'])
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">

</style>
